#m-star {
  background: #000;
  background: -webkit-radial-gradient(#0d141a, #1a2733);
  background: -o-radial-gradient(#0d141a, #1a2733);
  background: -moz-radial-gradient(#0d141a, #1a2733);
  background: radial-gradient(#0d141a, #1a2733);
  display: block; }

.m-logo {
  margin-left: 5px;
  margin-top: 5px; }

.m-menu-btn {
  position: absolute;
  right: 16px;
  top: 16px; }

.m-nav {
  position: absolute;
  top: 0;
  right: -200px;
  width: 200px;
  background-color: rgba(31, 54, 77, 0.8);
  padding-top: 60px;
  padding-left: 0; }
  .m-nav .close-btn {
    background: url("/dist/img/index_m/m-icon-close.png") no-repeat;
    -webkit-background-size: 18px 18px;
    background-size: 18px 18px;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 18px;
    height: 18px; }
  .m-nav li a {
    line-height: 56px;
    width: 100%;
    padding-left: 40px;
    color: #fff;
    text-decoration: none;
    display: block; }
    .m-nav li a:hover {
      background-color: #132232; }

.m-main {
  position: absolute;
  top: 20%;
  left: 50%;
  width: 240px;
  margin-left: -120px; }
  .m-main h1 {
    height: 80px; }
    .m-main h1 img {
      position: absolute; }
  .m-main .m-nav-main {
    padding: 20px 0;
    border-top: 1px solid #273341;
    border-bottom: 1px solid #273341;
    animation: m-slidedown 2s;
    -webkit-animation: m-slidedown 2s;
    overflow: hidden; }
    .m-main .m-nav-main li a {
      display: block;
      width: 100%;
      text-align: center;
      line-height: 45px;
      color: #f5f5f5;
      text-decoration: none; }
    .m-main .m-nav-main li:hover {
      background-color: rgba(48, 56, 64, 0.4);
      color: #fff; }

.m-arrow {
  position: absolute;
  bottom: 16px;
  left: 50%;
  width: 27px;
  height: 17px;
  background: url("/dist/img/index_m/arrow.png") no-repeat;
  -webkit-background-size: 27px 17px;
  background-size: 27px 17px;
  -webkit-animation: 3s infinite arrowup;
  animation: 3s infinite arrowup;
  margin-left: -13px; }

@-webkit-keyframes arrowup {
  0% {
    opacity: 0;
    transform: translate(0, 0); }
  50% {
    opacity: 1;
    transform: translate(0, -20px); }
  100% {
    opacity: 0;
    transform: translate(0, -30px); } }

@keyframes arrowup {
  0% {
    opacity: 0;
    transform: translate(0, 0); }
  50% {
    opacity: 1;
    transform: translate(0, -20px); }
  100% {
    opacity: 0;
    transform: translate(0, -30px); } }

@-webkit-keyframes m-slidedown {
  from {
    max-height: 0;
    padding: 0; }
  to {
    max-height: 300px;
    padding: 20px 0; } }

@keyframes m-slidedown {
  from {
    max-height: 0;
    padding: 0; }
  to {
    max-height: 300px;
    padding: 20px 0; } }

.page-slider {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 9; }

.m-navbar {
  background: none; }

.navbar-fixed-top {
  z-index: 999; }

.m-main .swiper-slide p.pic {
  margin-bottom: 32px; }

.m-main .swiper-slide p {
  text-align: center;
  color: #f5f5f5;
  max-width: 286px;
  margin: 8px auto; }

.m-main .swiper-slide p:last-of-type {
  padding-bottom: 30px; }

.m-page-2 {
  width: 100%;
  left: 0;
  margin-left: 0;
  top: 15%; }

.m-page.zoomindex {
  z-index: 9; }

.join-us {
  padding: 30px; }
  .join-us h1 {
    font-size: 24px;
    color: #fff;
    font-weight: normal;
    padding: 8px 0; }
  .join-us form .form-control {
    margin: 8px 0; }
  .join-us form input[type=text], .join-us form textarea {
    background-color: #19232f;
    border: 1px solid #141c26;
    border-radius: 2px;
    color: #fff; }
  .join-us form input[type=submit] {
    color: #fff;
    width: 100%; }

#musicControl {
  width: 2.4em;
  height: 2.4em;
  padding: .3em;
  border-radius: 50%;
  border: 2px solid #494d5e;
  position: fixed;
  right: 1em;
  bottom: 1.6em;
  -webkit-animation: 4s infinite loops;
  -o-animation: 4s infinite loops;
  animation: 4s infinite loops;
  background: transparent;
  z-index: 999; }

#musicControl.active {
  background: rgba(0, 0, 0, 0.7); }

#musicControl img {
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg); }

@-webkit-keyframes loops {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes loops {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
